:root{
    --backColor:black;
    --frontColor:white;
    --hotColor:yellow;
}

body{
    background-color: var(--backColor);
    padding: 0px 0px;
    margin: 0px 0px;
}
.background
{
    background-image: url(../resource/background.jpg);
    filter: blur(5px) brightness(20%);
    z-index: -1;
    animation: ease-in-out 0.5s;
    margin: 0px 0px;
    padding: 0px 0px;
    animation-name: show;
    animation-delay: 0s;
    animation-fill-mode: both;
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0;

}

@keyframes showFromDown{
    0%{
        opacity: 0;
        transform: translate(0,100px);
    }
    100%{
        opacity: 1;
        transform: translate(0px,0px);
    }
}

@keyframes showFromUp{
    0%{
        opacity: 0;
        transform: translate(0,-100px);
    }
    100%{
        opacity: 1;
        transform: translate(0px,0px);
    }
}

@keyframes showFromLeft{
    0%{
        opacity: 0;
        transform: translate(-100px,0px);
    }
    100%{
        opacity: 1;
        transform: translate(0px,0px);
    }
}

@keyframes showFromRight{
    0%{
        opacity: 0;
        transform: translate(100px,0px);
    }
    100%{
        opacity: 1;
        transform: translate(0px,0px);
    }
}
@keyframes show{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}